<template>
  <div>
    <el-button type="primary" @click="showAddDialog = true">添加用户</el-button>

    <el-dialog title="添加用户" v-model="showAddDialog">
      <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="addForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </div>
    </el-dialog>

    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑用户" v-model="showEditDialog">
      <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="editForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="updateUser">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import {fetchUserPage} from "@/api/UserApi.ts";

const fetchUser = async () => {
  const response = await fetchUserPage(currentPage.value, pageSize.value, {});
  users.value = response.data.records;
  total.value = response.data.total;
};

const users = ref([
  { id: 1, username: 'user1', password: 'password1' },
  { id: 2, username: 'user2', password: 'password2' },
]);

const showAddDialog = ref(false);
const addForm = reactive({
  username: '',
  password: '',
});

const showEditDialog = ref(false);
const editForm = reactive({
  id: null,
  username: '',
  password: '',
});

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
});

const addFormRef = ref(null);
const addUser = () => {
  addFormRef.value.validate((valid) => {
    if (valid) {
      const newUser = {
        id: users.value.length + 1,
        username: addForm.username,
        password: addForm.password,
      };
      users.value.push(newUser);
      showAddDialog.value = false;
      resetAddForm();
      ElMessage.success('用户添加成功');
    } else {
      ElMessage.error('验证失败');
      return false;
    }
  });
};

const resetAddForm = () => {
  addForm.username = '';
  addForm.password = '';
};

const editFormRef = ref(null);
const editUser = (row) => {
  editForm.id = row.id;
  editForm.username = row.username;
  showEditDialog.value = true;
};

const updateUser = () => {
  editFormRef.value.validate((valid) => {
    if (valid) {
      const index = users.value.findIndex(user => user.id === editForm.id);
      if (index !== -1) {
        users.value[index] = {
          id: editForm.id,
          username: editForm.username,
          password: editForm.password,
        };
        showEditDialog.value = false;
        ElMessage.success('用户更新成功');
      }
    } else {
      ElMessage.error('验证失败');
      return false;
    }
  });
};

const deleteUser = (id) => {
  const index = users.value.findIndex(user => user.id === id);
  if (index !== -1) {
    users.value.splice(index, 1);
    ElMessage.success('用户删除成功');
  }
};

fetchUserPage(1, 10, {})
</script>

<style scoped>
/* 添加一些样式 */
</style>


